<template>
  <div class="table-box">
    <div style="margin-bottom:10px">
      <el-button type="primary" @click="addRow">添加一条</el-button>
      <el-button type="primary" @click="submit()">提交</el-button>
      <el-switch
        v-model="setCopyMode"
        class="mb-2"
        active-text="单机获取复制焦点、双击唤醒输入框"
        inactive-text="点击唤醒输入框"
        @change="switchChange"
      />
    </div>
    <el-table
      border
      :data="tableData"
      :columns="columns"
      size="normal"
      @row-dblclick="onDoubleClickRow"
      @row-click="onClickRow"
      @cell-click="cellClick"
      @header-click="headerClick"
      :highlight-current-row="true"
    >
      <template v-for="(item, index) in columns" :key="index">
        <!-- item.visableNewFlag || item.visableModifyFlag || item.visableChangeFlag 判断是否可以编辑/新增/更改 -->
        <el-table-column :prop="item.fieldCode" :label="item.fieldName" :data-index="index" v-bind="{ ...getItemBindValue(item) }">
          <template #header="{ column, $index }">
            <span class="column-header"><i v-if="item.requiredFlag">*</i>{{ item.fieldName }}</span>
          </template>
          <template #default="{row, $index}">
            <table-item
              :columnData="item"
              :itemData="row"
              :colIndex="index"
              :rowIndex="$index"
              :currentRowIndex="currentRowIndex"
              :currentColumnIndex="currentColumnIndex"
              :setCopyMode="setCopyMode"
              :rules="props.rules"
            ></table-item>
          </template>
        </el-table-column>
      </template>
      <el-table-column fixed="right" label="操作" width="120">
        <template #default="{row, $index}">
          <el-button type="info" link @click.stop="saveRow(row)">
            确定
          </el-button>
          <el-button type="info" link @click.stop="delRow(row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
// https://micro-ops-test.zicber.com/tenantDetails?lovId=224
import { nextTick, onBeforeUnmount, onMounted, ref, computed } from 'vue'
import TableItem from './tableitem.vue'
import { useTable } from './hooks/tableColumn'
import { tableCopy } from './hooks/tableCopy'
import { mixinsData } from './hooks/mixinsData'
import { setComponents } from './hooks/tableFormItem'
const props = defineProps({
  tableData: {
    type: Array,
    default: () => []
  },
  tableColumn: {
    type: Array,
    default: () => []
  },
  rules: {
    type: Object,
    default: () => {}
  }
})
// 表格数据list 赋值
const tableData = ref([])
tableData.value = props.tableData
// 表头配置
const { getItemBindValue, resctColumnList } = useTable({ tableColumn: props.tableColumn })
// 表格粘贴
const { setCopyMode, currentRowIndex, currentColumnIndex, currentColumnKey, rowsInfo, columns, itemRow, pasteInfo, tableRowList } = tableCopy({
  tableData
})
// 赋值表头数据
columns.value = resctColumnList()
// 设置form 类型
const { compenentUrl } = setComponents({})
const { forItem } = mixinsData({})

// 提交表格
const submit = () => {
  let valid = true
  tableData.value.forEach((item, index) => {
    item.isError = forItem(item, props.rules)
  })

  if (valid) {
  } else {
  }
}
// 复制表格

const prevRow = ref({})
// const onClickRow = (row, column, event) => {}

const clipboardlistFalg = ref(false) // 处理复制到输入框 还是复制循环到表格
// 切换唤醒输入框
const switchChange = (val) => {
  if (val) {
    let keyName = []
    Object.keys(itemRow.value.isError).map((key) => {
      keyName.push(key)
    })
    if (!tableData.value.length) return
    tableData.value.forEach((item) => {
      item.isEdit = false
      keyName.forEach((k) => {
        if (k !== 'isEdit' && k !== 'isError') {
          item.isError[k].status = true
          item.isError[k].msg = ''
        }
      })
    })
  }
}
// 当某一行被双击时会触发该事件
const onDoubleClickRow = (row, column, event) => {
  if (setCopyMode.value) {
    if (prevRow.value.isEdit) {
      prevRow.value.isEdit = false
    }
    row.isEdit = true
    prevRow.value = row
    clipboardlistFalg.value = true
  }
}

// 当某一行被单击时会触发该事件
const onClickRow = (row, column, event) => {
  if (!setCopyMode.value) {
    if (prevRow.value.isEdit) {
      prevRow.value.isEdit = false
    }
    row.isEdit = true
    prevRow.value = row
    clipboardlistFalg.value = true
  }
}
// 当某个单元格被点击时会触发该事件
const cellClick = (row, column, cell, event) => {
  if (setCopyMode.value) {
    let rowIndex = tableData.value.findIndex((item) => item === row)
    currentColumnKey.value = column.property
    currentRowIndex.value = rowIndex
    currentColumnIndex.value = column.getColumnIndex()
    clipboardlistFalg.value = false
  }
}
// 当某一列的表头被点击时会触发该事件
const headerClick = (column, event) => {
  if (setCopyMode.value) {
    currentColumnKey.value = column.property
    currentRowIndex.value = tableData.value.length
    currentColumnIndex.value = column.getColumnIndex()
    clipboardlistFalg.value = false
  }
}
// 暂存
const saveRow = (row) => {
  row.isEdit = false
}
// 删除
const delRow = (row) => {
  tableData.value.splice(tableData.value.indexOf(row), 1)
}
// 新增
const addRow = () => {
  tableData.value.map((item) => {
    item.isEdit = false
  })
  let json = {}
  for (let key in itemRow.value) {
    json = {
      [key]: key !== 'isError' ? '' : itemRow.value[key],
      ...json
    }
  }
  tableData.value.push({ ...json, isEdit: true })
}
onMounted(() => {
  document.addEventListener('paste', (event) => {
    pasteInfo(event)
  })
})
onBeforeUnmount(() => {
  document.removeEventListener('paste', (event) => {
    pasteInfo(event)
  })
})
</script>

<style lang="scss">
#app {
  height: 100%;
}
</style>

<style lang="scss" scoped>
.table-box {
  height: 100%;
  margin-top: 0;
  :deep(.el-table) {
    --el-table-current-row-bg-color: #f4f8fe;
    --el-table-row-hover-bg-color: #f4f8fe;
    tr {
      td.el-table__cell {
        padding: 4px 0;
        position: inherit;
      }
      &:hover {
        .table-text {
          border: var(--el-table-border);
          background: #fff;
          cursor: text;
          .el-icon {
            opacity: 1;
          }
        }
      }
      .column-header {
        i {
          color: var(--el-color-danger);
          margin-right: 4px;
        }
      }
      .el-form-item {
        margin-bottom: 0;
      }
    }
  }
}
</style>
